import React, { useState } from 'react';
import { Map, Circle, APILoader } from '@uiw/react-baidu-map';

const Example = () => {
  const [visiable, setVisiable] = useState(true);
  const [enableEditing, setEnableEditing] = useState(false);
  const [strokeOpacity, setStrokeOpacity] = useState(0.9);
  function circleRef(props) {
    if (props && props.circle) {
      console.log('circle:', props.circle, props.map, props.BMap);
    }
  }
  return (
    <>
      <button onClick={() => setVisiable(!visiable)}>{visiable ? '隐藏' : '显示'}</button>
      <button onClick={() => setEnableEditing(!enableEditing)}>{enableEditing ? '取消编辑' : '编辑'}</button>
      <button onClick={() => setStrokeOpacity(0.7)}>透明度0.7</button>
      <button onClick={() => setStrokeOpacity(0.2)}>透明度0.2</button>
      <Map widget={['NavigationControl']} style={{ height: 350 }}>
        <Circle
          ref={circleRef}
          visiable={visiable}
          enableEditing={enableEditing}
          strokeOpacity={strokeOpacity}
          strokeWeight={1}
          center={{ lng: 121.455228, lat: 31.240257 }}
          radius={1000}
        />
        <Circle
          visiable={visiable}
          enableEditing={enableEditing}
          strokeOpacity={strokeOpacity}
          center={{ lng: 121.490298, lat: 31.229388 }}
          radius={1500}
        />
      </Map>
    </>
  );
}

const Demo = () => (
  <div style={{ width: '100%' }}>
    <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
      <Example />
    </APILoader>
  </div>
);

export default Demo;